<template>
  <div class="jbc-container" :style="{ minHeight: `${minHeight}px` }">
    <jbc-menu />
    <div class="jbc-shopping">
      <el-breadcrumb v-if="pathList.length" style="margin-top: 5px;padding: 12px 0 20px;" :separator-icon="ArrowRight">
        <el-breadcrumb-item v-for="path in pathList" :key="path.id" :to="path.url">{{ path.name }}</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="jbc-main">
        <shoppingCartGoodsList :goods-list="shopCart.goodsList" :count="shopCart.count" editor></shoppingCartGoodsList>
      </div>
    </div>
    <bottomOperate :select-count="selectCount" :select-price="shopCart.totalprice" :btn-txt="btnTxt" :loading="loading"
      @submit="bindSubmit">
    </bottomOperate>
  </div>
</template>

<script setup name="ShoppingCart">
import useShoppingCartStore from '@/components/webCustom/shoppingCart'
import { appOrderAddPost } from '@/api/order'
import { ArrowRight } from "@element-plus/icons-vue"
const router = useRouter()
const shopCart = useShoppingCartStore()
const minHeight = inject('bodyMinHeight')
const pathList = [{ id: '1', name: '首页', url: '/' }, { id: '2', name: '购物车' }]
const loading = ref(false)
const selectCount = computed(() => {
  return shopCart.goodsList.reduce((s, n) => {
    s += n.shopSkuSellVoLists.filter((i) => i.isSelect === 'Y').length
    return s
  }, 0)
})
const btnTxt = computed(() => {
  return shopCart.shopType !== '2' ? '去结算' : '去提交'
})
const bindSubmit = () => {
  loading.value = true
  appOrderAddPost({ body: { type: 3 } }).then(order => {
    useShoppingCartStore().init().then(res => {
      router.push({ path: `/payment/${order.data}` })
    }).finally(res => {
      loading.value = false
    })
  }).finally(() => {
    loading.value = false
  })
}
</script>

<style lang="scss" scoped>
.jbc {
  &-shopping {
    margin: 0 auto;
    width: var(--box-width);
  }

  &-main {
    background: #FFFFFF;
    border-radius: 20px;
    box-sizing: border-box;
    padding: 30px;
  }
}
</style>